
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" href="stockview.css" />
</head>
<style type="text/css">
.menu { width: 1000px; margin: 0 auto; height: 30px; padding-top: 4px; background:url(http://img.ifeng.com/tres/finance/ustock/nav/menubg.gif) no-repeat left top; }
.menu ul {list-style:none}
\.menu ul li {float:left;line-height:0px;height:30px;width:80px;font-size:18px}
\.menu. li a{color:#ffffff;}
\.menu b {margin-left: 100px;}

#totallabel li a {color:#ffffff;}
#totallabel li {float:left;line-height:0px;height:30px;width:80px;font-size:18px}
#search-div {margin-left: 800px;margin-top: -15px;}
#search-ul {z-index: 999;background-color:white}
#search-ul li {margin-top:5px;}
#stocklist {margin-left:200px;width:1000px} 
#stocklist ul{width: 800px;margin:0;list-style: none;}
#stocklist li{display: block;float:left;line-height:16px;height:30px;width:120px;font-size:12px}
#stocklist li a{color:#004276;}

a:link,a:visited{text-decoration:none;}
</style>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div class="menu">
  <ul id="totallabel">
    <li><a href="sh.html">沪市</a></li> 
    <li><a href="sz.html">深市</a></li> 
    <li><a href="sz300.html">创业板</a></li> 
    <li><a id="jishuzhibiao" href="#nogo">技术指标</a></li> 
  </ul>
  <div id="search-div">
    <input id="search-input" style="width=200px"/>
    <ul id="search-ul" style="position:absolute;border:1px #000 solid;margin:0px;padding:10;width:100px;list-style:none"></ul>
  </div>
</div>

<script type="text/javascript">
$('#search-input').keyup(function() {
    // alert($(this).val());
    $.ajax({
        context : $(this).parent(),
        url : "/search.do?src=" + $(this).val(),
        success : function(rsp) {
          $("#search-ul").empty();
          $.globalEval('var nodes=' + rsp);
          for(var n in nodes) {
            $("#search-ul").append($('<li style="font-size:9px;margin-left:1px;margin:0;margin-top:5px"><a href="http://stockdata.stock.hexun.com/' 
            + nodes[n][0] + '.shtml">' 
            + nodes[n][0] + ' ' + nodes[n][1] + '</a></li>'));
          }
        }
      }
    );
  }
);
var stocks=[['600218','全柴动力','- 1.00%'],['600218','全柴动力','+1.00%'],['600218','全柴动力','+1.00%'],['600218','全柴动力','+1.00%'],['600218','全柴动力','+1.00%'],['600218','全柴动力','+1.00%'],['600218','全柴动力','+1.00%'],['600218','全柴动力','+1.00%'],['600218','全柴动力','+1.00%'],['600218','全柴动力','+1.00%']];
function createTopView(name, stocks){
  var div = $("<div style='background-color:#F7F4F0;'><p>" + name + "<a href='top10detail.html?class=" + name + "'>查看更多</a></p></div>")
  var table=$("<table></table>");
  for(var i=0; i<stocks.length; i++){
    tmptr = $("<tr></tr>");
    for(var j=0; j<stocks[i].length; j++){
      str = "<td>" + stocks[i][j] + "</td>";
      tmptd = $(str);
      tmptr.append(tmptd);
    }
    if(stocks[i][3][0]=='+'){
      tmptr.children("td:last").addClass("red");
    }else{
      tmptr.children("td:last").addClass("green");
    }
    table.append(tmptr);
  }
  div.append(table);
  var li = $("<li></li>");
  li.append(div);
 
  //alert(li.html()); 
  $(".stockview").children("ul").append(li);
}

function createTopView1(stocks){
  var div = $("<div style='background-color:#F7F4F0;'><p>KDJ金叉<a href='www.baidu.com'>查看更多</a></p></div>")
  var tmpul=$("<ul></ul>");
  for(var i=0; i<stocks.length; i++){
    var str = "<li><a href='baidu.com'>" + stocks[i][0] + " " + stocks[i][1] + " <b>" + stocks[i][2] + "</b></a></li>";
    var tmpli = $(str);
    if(stocks[i][2][0]=='+'){
      tmpli.children("a").children("p").addClass("red");
    }else{
      tmpli.children("a").children("p").addClass("green");
    }
    tmpul.append(tmpli);
  }
  div.append(tmpul);
  var li = $("<li></li>");
  li.append(div);
  $(".stockview").children("ul").append(li);
} 

function handleTop10(text){
  $.globalEval('var nodes=' + text);
  alert(text);
  for(var k in nodes){
    createTopView(k, nodes[k]);
  }
}

$("#jishuzhibiao").click(function(){
  //$("#bodycontent").html("");
  //createTopView(stocks);
    $.ajax({
        //context : $(this).parent(),
        url : "/top10.do",
        success : function(responseText) {
          handleTop10(responseText);
        }
  })
}
)
</script>
<div class="stockview" style="margin-top:20px">
  <ul class="stocklist">
  </ul>
</div>
